<template>
    <div>
        <div style="background-color: rgb(233,236,239);width: 100%;height: 100%;position:fixed;z-index: -1;"></div>
        <Nav />
        <div id="Article">
            <ArticleContent/>
            <ArticleAuthor/>
            <ArticleComment/>
            <ArticleFunction/>
        </div>
        <div style="clear: both; height: 30px;"></div>    
    </div>
</template>
<script>
import Nav from '@/components/Nav.vue'
import ArticleContent from '@/components/ArticleContent.vue'
import ArticleAuthor from '@/components/ArticleAuthor.vue'
import ArticleComment from '@/components/ArticleComment.vue'
import ArticleFunction from '@/components/ArticleFunction.vue'
import $ from "jquery"
export default {
    components: {
        Nav,
        ArticleContent,
        ArticleAuthor,
        ArticleComment,
        ArticleFunction
    },
    
}
</script>
<style>
        #Article{
            width: 1200px;
            position: relative;
            margin: 0 auto;
            padding-top: 80px;
        }
        #ArticleLeft{
            width: 740px;
            margin-right: 10px;
            padding: 30px;
            background-color: white;
            float: left;
            border-radius: 4px;
        }
        #ArticleRight{
            width: 330px;
            /* height: 500px; */
            padding:30px;
            background-color: white;
            float: left;
            border-radius: 4px;
        }
        #ArticleLeft .span p{
            margin-top: 20px;
            padding: 2px 6px;
            height: 24px;
            background-color: rgb(157, 217, 251);
            color:rgb(5, 147, 230);
            border-radius: 6px;
            display: inline-block;
        }
        #ArticleLeft .span span{
            margin-left: 30px;
            color:rgb(130, 131, 131);
            display: inline-block;
            letter-spacing:2px
        }
        #ArticleLeft .main img{
            width: 100%;
            height: 100%;
        }
        #ArticleRight .portrait{
            float: left;
            width: 64px;
            border-radius: 5px;
            margin-top: 5px;
            padding-right: 20px;
        }
        #ArticleRight .user img{
            width: 64px;
            height: 64px;
            float: left;
            border-radius: 5px;
        }
        #ArticleRight .username{
            float: left;
            width: 240px;
        }
        #ArticleRight .name p{
            height: 37px;
            margin-top: 5px;
            line-height: 26px;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 2px;
            transition: all .3s;
            cursor: pointer;
        }
        #ArticleRight .name p:hover{
            color: rgba(81,154,250);
        }
        #ArticleRight .leave {
            line-height: 20px;
            color:rgb(116, 116, 116);
            letter-spacing:2px;
        }
        #ArticleRight .signature{
            width: 330px;
            line-height: 26px;
            padding: 25px 0;
            height: 52px;
            color:grey;
            font-size: 17px;
            letter-spacing:2px;
            overflow: hidden;
        }
        #ArticleRight .fans{
            font-size: 18px;
            color:rgb(93, 93, 93);
        }
        #ArticleRight .fans div{
            float: left;
            width: 50%;
        }
        #ArticleRight .fans span{
            color:black;
            font-weight: bolder;
        }
        #ArticleRight .follow{
            width: 330px;
            padding-top: 30px;
            clear: both;
        }
        #ArticleRight .follows{
            width: 100px;
            /* height: 40px; */
            border-radius: 3px;
            background-color:rgb(67, 184, 252);
            border:1px solid rgb(67, 184, 252);
            position: relative;
            margin: 0 auto;
            color: white;
            left: 50%;
            transform: translateX(-50%);
            /* line-height: 40px; */
            font-size: 20px;
            text-align: center;
            box-shadow: 0 0 2px rgba(158, 156, 156, 0.5);
            transition: all .3s;
            letter-spacing: .1em;
        }
        #ArticleRight .follows:hover{
            background-color:rgb(33, 166, 243);
        }
        #ArticleRight .follows2 ,#ArticleRight .follows3{
            width: 100px;
            /* height: 40px; */
            left: 50%;
            transform: translateX(-50%);
            border-radius: 3px;
            border:1px solid rgb(67, 184, 252);
            background-color:rgb(67, 184, 252);
            position: relative;
            margin: 0 auto;
            color: white;
            /* line-height: 40px; */
            font-size: 20px;
            text-align: center;
            box-shadow: 0 0 2px rgba(158, 156, 156, 0.5);
            transition: all .3s;
            letter-spacing: .1em;
        }
        #ArticleRight .follows2:hover,#ArticleRight .follows3:hover{
            background-color:rgb(0, 152, 240);
        }
        #ArticleRight .follow .followscss1{
            background-color:red;
        }
        #ArticleRight .follow .followscss2{
            background-color:rgb(7, 140, 218);
        }
        #Article .side{
            clear: both;
            position: absolute;
            position: fixed;
            width: 70px;
            top:190px;
            left: 50%;
            margin-left: -680px;
        }
        #Article .side p{
            text-align: center;
        }
        #Article .side li{
            list-style: none;
            width: 36px;
            height: 36px;
            position: relative;
            margin:12px auto;
            text-align: center;
            border-radius: 50%;
            background-color: white;
            box-shadow:  0 0 1px rgb(130, 131, 131);
            transition: all .3s;
            cursor: pointer;
        }
        #Article .side li svg{
            position: relative;
            margin:8px 0;
            /* fill: red; */
        }
        /* #Article .side li svg path{
            fill:#707070;
            display: inline;
        } */
        /* #Article .side li svg path:hover{
            fill:#ffffff;
            display: inline;
        } */
        #Article .side :nth-child(2){
            width: 48px;
            height: 48px;
            border: 1px solid rgb(5, 147, 230);
            margin-bottom: 15px;
        }
        #Article .side :nth-child(2):hover,#Article .side :nth-child(3):hover,#Article .side :nth-child(4):hover{
            background-color: rgb(245, 245, 245);
        }
        #Article .side p{
            font-size: 18px;
            font-weight: 600;
            color: rgb(133, 132, 132);
            cursor: default;
        }
        
        #Article .main p{
            max-width: 740px;
            overflow: auto;
            letter-spacing:1px;
            /* text-indent:2em; */
            padding:4px 0;
            color: rgb(51, 51, 51);
        }
        #Article .main h1,h2,h3{
            padding:10px 0;
        }
        #Article .main hr{
            margin:10px 0;
        }
        #Article .articletime{
            padding-top: 15px;
            color: gray;
        }
        #Article .articleicon{
            padding-top: 50px;
            width: 400px;
            position: relative;
            margin:0 auto;
        }
        #Article .articleicon1{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            width: 90px;
            height: 40px;
            float: left;
            color: rgb(29, 168, 248);
            border:1px solid rgb(29, 168, 248);
            border-radius: 5px;
            margin-left: 20px;
            transition: .3s all;
            cursor: pointer;
        }
        #Article .articleicon1:hover {
            background-color:rgb(5, 147, 230) ;
            color:white
        }
         #Article .articleicon1:active{
             background-color:rgba(5, 147, 230,0.8) ;
            color:white
         }
        #Article .articleicon1s{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            width: 90px;
            height: 40px;
            float: left;
            color:white;
            border:1px solid rgb(29, 168, 248);
            border-radius: 5px;
            margin-left: 20px;
            background-color: rgb(5, 147, 230);
            cursor: pointer;
        }
        #Article .articleicon1s:active{
             background-color:rgba(5, 147, 230,0.8) ;
            color:white
         }
        #Article .articleicon2{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            float: left;
            color: rgb(101, 101, 101);
            border:1px solid rgb(101, 101, 101);
            border-radius: 5px;
            margin-left: 20px;
            transition: .3s all;
            cursor: pointer;
        }
        #Article .articleicon3{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            float: left;
            color: rgb(101, 101, 101);
            border:1px solid rgb(101, 101, 101);
            border-radius: 5px;
            margin-left: 20px;
            transition: .3s all;
            cursor: pointer;
        }
        #Article .articleicon2:hover{
            background-color: rgb(121, 121, 121);
            color:white
        }
        #Article .articleicon2:active{
            background-color: rgba(121, 121, 121,0.8);
            color:white
        }
        #Article .articleicon2s{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            float: left;
            border:1px solid rgb(101, 101, 101);
            border-radius: 5px;
            margin-left: 20px;
            background-color: rgb(121, 121, 121);
            color:white;
            cursor: pointer;
        }
        #Article .articleicon2s:active{
            background-color: rgba(121, 121, 121,0.8);
            color:white
        }
        /* #Article .articleicon2 .icon{
            position: relative; 
            margin-top: 15px;
        } */
        #Article #conment{
            float: left;
            width: 800px;
            height: 300px;
            margin-top: 30px;
        }
        #Article #conment .conmentTitle{
            height: 40px;
            width: 800px;
            line-height: 40px;
            font-size: 22px;
        }
        #Article #conment .conmentmain{
            width: 740px;
            padding:30px;
            border-radius: 5px;
            background-color: white;
            margin-bottom: 50px;
        }
        #Article #conment .conmentTitle1{
            float: left;
        }
        #Article #conment .conmentTitle2{
            float: right;
            color: gray;
            padding:0 10px
        }
        #Article #conment .conmentTitle3{
            float: right;
        }
        #Article #conment .conmentown{
            height: 38px;
        }
        #Article #conment .conmentownimg{
            float: left;
            margin-right:20px;
        }
        #Article #conment .conmentmain img{
            width: 38px;
            height: 38px;
            border-radius: 5px;
            margin:0;
            padding: 0;
        }
        #Article #conment .conmentowntext{
            float: left;
        }
        #Article #conment .conmentowntext input{
            margin: 0;
            padding: 0;
            border-radius: 5px;
            outline:0;
            height:38px;
            width: 670px;
            font-size: 18px;
            padding-left: 10px;
            float: left;
            border: 1px solid rgb(167, 165, 165);
        }
        #Article #conment .conmentownup{
            /* width: 90px; */
            /* height: 40px; */
            /* line-height: 40px; */
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 5px;
            text-align: center;
            /* color: white; */
            border-radius: 5px;
            float: right;
            /* background-color: rgb(90, 186, 241); */
        }
        #Article #conment .conmentother{
            clear: both;
            padding-top: 20px;
        }
        #Article #conment .conmentothertext{
            float: left;
            width: 680px;
            font-size: 16px;
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 60px;
            letter-spacing:2px;
            /* color:rgb(29, 168, 248) */
            /* font-weight: bolder; */
        }
        #Article #conment .conmentothername{
            color:rgb(29, 168, 248);
            font-weight: bolder;
            font-size: 18px;
            cursor: pointer;
        }
        #Article #conment .conmentothertime svg{
            
            transform: translateY(-30%);
            padding-right: 10px;
        }
        #Article #conment .conmentothertime{
            clear: both;
            position: relative;
            padding-left: 60px;
            padding-top: 15px;
            color: gray;
            line-height: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(61, 60, 60, 0.52);
        }#Article #conment .conmentothertime svg{
            padding-top: 15px;
            
        }
        #Article #conment  svg{
            fill:white;
            /* background-color: thistle; */
        }
</style>